import React, { Component } from "react";
import { Card, Button, Input, Icon, Table, Tag, Switch } from "antd";
class home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const title = (
      <Button
        onClick={() =>
          this.props.history.push("/intelligentLearning/newdetail")
        }
      >
        创建策略
      </Button>
    );
    const extra = (
      <div>
        <Input style={{ width: 200 }} />
        &nbsp;&nbsp;
        <Button>
          <Icon type="reload" />
        </Button>
      </div>
    );
    const columns = [
      {
        title: "策略名称",
        dataIndex: "name",
        key: "name",
        render: (text) => <a>{text}</a>,
      },
      {
        title: "已生效服务器",
        dataIndex: "servers",
        key: "servers",
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
      },
      {
        title: "应用数",
        key: "apply",
        dataIndex: "apply",
        render: (tags) => (
          <span>
            {tags.map((tag) => {
              let color = tag.length > 2 ? "red" : "green";
              if (tag === "loser") {
                color = "volcano";
              }
              return (
                <Tag color={color} key={tag}>
                  {tag.toUpperCase()}
                </Tag>
              );
            })}
          </span>
        ),
      },
      {
        title: "策略状态",
        render: () => (
          <>
            <Switch />
          </>
        ),
      },
      {
        title: "操作",
        key: "action",
        render: () => (
          <div>
            <Button type="primary">编辑</Button>&nbsp; &nbsp;
            <Button type="primary">操作</Button>
          </div>
        ),
      },
    ];

    const data = [
      {
        key: "1",
        name: "test",
        servers: 0,
        status: "学习中",
        apply: ["可信", "不可信"],
      },
      {
        key: "2",
        name: "陈冠希",
        servers: 0,
        status: "学习中",
        apply: ["可信"],
      },
      {
        key: "3",
        name: "吴彦祖",
        servers: 0,
        status: "学习中",
        apply: ["可信", "不可信"],
      },
    ];
    return (
      <Card title={title} extra={extra}>
        <Table columns={columns} dataSource={data} />
      </Card>
    );
  }
}

export default home;
